<script setup lang="ts">
definePageMeta({
  layout: "admin",
});

const { $get } = use$fetch();

const { data: aggList } = await $get<AggResp[]>("/admin/agg");

const aggItem = (key: string) =>
  aggList.value?.find((a) => a.title === key)?.total || 0;
</script>

<template>
  <AdminPageTitle>首页</AdminPageTitle>

  <section class="my-6">
    <ul class="grid grid-cols-1 gap-y-8 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-0">
      <li
        class="flex justify-start items-center divide-x gap-x-2 border rounded-md bg-white min-h-32 lg:hover:border-gray-300 lg:hover:shadow-sm lg:transition-all"
      >
        <div class="grow text-center">用户</div>
        <div class="p-3 flex justify-around items-center gap-x-1 grow">
          <div class="flex flex-col-reverse items-center gap-y-1">
            <div class="text-xs">今日</div>
            <div class="text-green-600 text-lg">
              {{ aggItem("user-today") }}
            </div>
          </div>
          <div class="flex flex-col-reverse items-center gap-y-1">
            <div class="text-xs">合计</div>
            <div class="text-blue-600 text-lg">
              {{ aggItem("user") }}
            </div>
          </div>
        </div>
      </li>
      <li
        class="flex justify-start items-center divide-x gap-x-2 border rounded-md bg-white min-h-32 lg:hover:border-gray-300 lg:hover:shadow-sm lg:transition-all"
      >
        <div class="grow text-center">网址</div>
        <div class="p-3 flex justify-around items-center gap-x-1 grow">
          <div class="flex flex-col-reverse items-center gap-y-1">
            <div class="text-xs">今日</div>
            <div class="text-green-600 text-lg">{{ aggItem("url-today") }}</div>
          </div>
          <div class="flex flex-col-reverse items-center gap-y-1">
            <div class="text-xs">合计</div>
            <div class="text-blue-600 text-lg">{{ aggItem("url") }}</div>
          </div>
        </div>
      </li>
      <li
        class="flex justify-start items-center divide-x gap-x-2 border rounded-md bg-white min-h-32 lg:hover:border-gray-300 lg:hover:shadow-sm lg:transition-all"
      >
        <div class="grow text-center">点击</div>
        <div class="p-3 flex justify-around items-center gap-x-1 grow">
          <div class="flex flex-col-reverse items-center gap-y-1">
            <div class="text-xs">今日</div>
            <div class="text-green-600 text-lg">
              {{ aggItem("visit-today") }}
            </div>
          </div>
          <div class="flex flex-col-reverse items-center gap-y-1">
            <div class="text-xs">合计</div>
            <div class="text-blue-600 text-lg">{{ aggItem("visit") }}</div>
          </div>
        </div>
      </li>
    </ul>
  </section>
</template>
